<template>
    <a-card :bordered="false" >
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
                <a-row :gutter="24">
                    <!-- useful_auto_generate_section_start -->

                    <a-col :span="6">
                        <a-form-item label="批次号">
                            <a-input v-model="queryParam.batch_no" placeholder="请输入批次号" />
                        </a-form-item>
                    </a-col>

                    <!--                    <a-col :md="6" :sm="12">-->
                    <!--                        <a-form-item label="是否可用">-->
                    <!--                            <a-select v-model="queryParam.status" :style="{width: '150px'}" :options="optionsList"  />-->
                    <!--                        </a-form-item>-->
                    <!--                    </a-col>-->

                    <a-col :span="4">
                        <a-form-item label="状态">
                            <a-select v-model="queryParam.status" :style="{width: '80px'}" :options="optionsList"  />
                        </a-form-item>
                    </a-col>



                    <a-col :span="8">
                        <a-form-item label="创建时间">
                            <a-range-picker v-model="queryParam.gmtCreate" :style="{width: '230px'}" :placeholder="['开始时间', '结束时间']" format="YYYY-MM-DD" @change="(v)=>handleRangeDateChange(v,{startProperty:'create_time_start',endProperty:'create_time_end'})" />
                        </a-form-item>
                    </a-col>
                    <!--                    &lt;!&ndash; useful_auto_generate_section_end &ndash;&gt;-->

                    <!--                    <template v-if="toggleSearchStatus">-->
                    <!--                        &lt;!&ndash; useful_auto_generate_section_start &ndash;&gt;-->
                    <!--                        <a-col :md="8" :sm="12">-->
                    <!--                            <a-form-item label="修改时间">-->
                    <!--                                <a-range-picker v-model="queryParam.gmtModified" :style="{width: '230px'}" :placeholder="['开始时间', '结束时间']" format="YYYY-MM-DD" @change="(v)=>handleRangeDateChange(v,{startProperty:'gmtModifiedStart',endProperty:'gmtModifiedEnd'})" />-->
                    <!--                            </a-form-item>-->
                    <!--                        </a-col>-->
                    <!--                        &lt;!&ndash; useful_auto_generate_section_end &ndash;&gt;-->


                    <!--                    </template>-->


                    <a-col :span="6">
                        <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                          <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                          <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                          <a @click="handleToggleSearch" style="margin-left: 8px">
                            {{ toggleSearchStatus ? '收起' : '展开' }}
                            <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
                          </a>
                        </span>
                    </a-col>
                </a-row>

            </a-form>
        </div>
        <!-- 查询区域-END -->

        <!-- 操作按钮区域 -->
        <div class="table-operator">
            <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>

            <!--            <a-upload name="file" :showUploadList="false" :multiple="false" :headers="commentHeader" :action="importXlsUrl" @change="handleImportExcel">-->
            <!--                <a-button type="primary" icon="import" >导入考勤</a-button>-->
            <!--            </a-upload>-->
            <!--            <a-button type="primary" icon="download" @click="handleExportXls(exportXlsTitle,{tip:true,validateFun:exportValidator})">导出</a-button>-->

            <a-dropdown v-if="selectedRowKeys.length > 0">
                <a-menu slot="overlay">
                    <a-menu-item key="1" @click="batchDel">
                        <a-icon type="delete"/>
                        删除
                    </a-menu-item>
                </a-menu>
                <a-button style="margin-left: 8px"> 批量操作
                    <a-icon type="down"/>
                </a-button>
            </a-dropdown>
        </div>

        <!-- table区域-begin -->
        <div>
            <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;" v-if="selectedRowKeys.length > 0">
                <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
                selectedRowKeys.length }}</a>项
                <a style="margin-left: 24px" @click="onClearSelected">清空</a>
            </div>

            <a-table
                    ref="table"
                    size="middle"
                    :scroll="{x:true}"
                    bordered
                    rowKey="id"
                    :columns="columns"
                    :dataSource="dataSource"
                    :pagination="ipagination"
                    :loading="loading"
                    :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                    class="j-table-force-nowrap"
                    @change="handleTableChange">



              <span slot="action" slot-scope="text, record">
                <a @click="handleEdit(record)">编辑</a>
                <a-divider type="vertical" />
                  <a v-if="record.status == 0" @click="handleRelease(record.id)">发布</a>
                <a-divider v-if="record.status == 0" type="vertical" />
                <a-dropdown>
                  <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
                  <a-menu slot="overlay">
<!--                    <a-menu-item>-->
                      <!--                      <a @click="handlePauseOrResume(record.id,record.status)">暂停/恢复</a>-->
                      <!--                    </a-menu-item>-->
                    <a-menu-item>
                      <a @click="handleDetail(record)">详情</a>
                    </a-menu-item>


<!--                    <a-menu-item>-->
<!--                      <a-popconfirm title="确定发布吗?" @confirm="() => handleDelete(record.id)">-->
<!--                        <a>发布</a>-->
<!--                      </a-popconfirm>-->
<!--                    </a-menu-item>-->

                    <a-menu-item>
                      <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                        <a>删除</a>
                      </a-popconfirm>
                    </a-menu-item>


                  </a-menu>
                </a-dropdown>
              </span>


            </a-table>

        </div>

        <comment-modal ref="modalForm" @ok="modalFormOk"></comment-modal>
        <!--        <output-modal ref="outputModalForm" @ok="modalFormOk"></output-modal>-->

    </a-card>
</template>

<script>


    import '@/assets/less/common.less'
    import '@/assets/less/TableExpand.less'
    import { ListMixin } from '@/mixins/ListMixin'
    import { FormMixin } from '@/mixins/FormMixin'
    import CommentModal from './CommentModal'
    // import OutputModal from './OutputModal'
    import { getDataOptionList,formatDate } from '@/utils/util'
    import ARow from "ant-design-vue/es/grid/Row";
    import {postAction} from "../../../api/manage";
    // import { requestSetOptions,requestSetData } from '@/utils/commonUtils'
    // import moment from 'moment'
    // import {httpAction} from "../../../api/manage";
    // import {clientPost,clientGet} from '@/utils/crawlerClient'
    export default {
        name: 'commentList',
        mixins: [ListMixin,FormMixin],
        components: {
            ARow,
            CommentModal,
            // OutputModal,
        },
        data() {
            return {
                toggleSearchStatus:false,
                description: '',
                // 表头
                columns: [
                    {
                        title: '#',
                        dataIndex: '',
                        key:'rowIndex',
                        width:60,
                        align:"center",
                        // fixed: 'left',
                        customRender:function (t,r,index) {
                            return parseInt(index)+1;
                        }
                    },

                    //useful_auto_generate_section_start
                    {
                        title: '批次号',
                        dataIndex: 'batch_no',
                        width: 100,
                        align: 'center',
                    },
                    {
                        title: '发送内容',
                        dataIndex: 'content',
                        width: 100,
                        align: 'center',
                    },
                    {
                        title: '状态',
                        dataIndex: 'status',
                        width: 100,
                        align: 'center',
                        customRender:function (t,r,index) {
                            return t == 0 ? '草稿':'已提交';
                        }
                    },
                    {
                        title: '总数',
                        dataIndex: 'total_num',
                        width: 100,
                        align: 'center',
                    },
                    {
                        title: '已发送',
                        dataIndex: 'success_num',
                        width: 100,
                        align: 'center',
                    },

                    {
                        title: '创建时间',
                        dataIndex: 'create_time',
                        width: 100,
                        align: 'center',
                        customRender:function (t,r,index) {
                            return formatDate(t,'yyyy-MM-dd hh:mm');
                        }
                    },

                    {
                        title: '修改时间',
                        dataIndex: 'update_time',
                        width: 100,
                        align: 'center',
                        customRender:function (t,r,index) {
                            return formatDate(t,'yyyy-MM-dd hh:mm');
                        }
                    },
                    //useful_auto_generate_section_end
                    {
                        title: '操作',
                        dataIndex: 'action',
                        fixed:'right',
                        scopedSlots: {customRender: 'action'},
                        align: "center",
                        width: 170
                    }

                ],

                url: {
                    list: '/comment/list',
                    delete: '/comment/del',
                    deleteBatch: '/comment/del',
                    importXlsUrl:'/comment/importXls',
                    exportXlsUrl: '/comment/exportXls',

                },
                //useful_auto_generate_section_start
                optionsList:[{value:0,label:'草稿'},{value:1,label:'已提交'}],
                // enableOptionsList:[{value:0,label:'不可用'},{value:1,label:'可用'}],
                // statusOptions:getDataOptionList('templateStatusEnum'),
                //useful_auto_generate_section_end
                // superFieldList: [],
                // queryParam:{},
            }
        },
        created() {

            let $this = this;
            //useful_auto_generate_section_start
            // requestSetOptions("/crawlerClient/task/listPublicTemplates",{},function(options){$this.templateIdOptions=options;},{label:'name',value:'id'});
            //useful_auto_generate_section_end


        },
        computed: {
            // importXlsUrl: function () {
            //     // debugger
            //     console.log(JSON.stringify(process.env))
            //     let baseUrl = process.env.VUE_APP_API_BASE_URL;
            //     // return `${window._CONFIG['domianURL']}${this.url.importXlsUrl}`
            //     return `${baseUrl}${this.url.importXlsUrl}`
            // },
            // exportXlsTitle:function(){
            //     return this.queryParam.month+"考勤信息"
            // }
        },
        methods: {
            initQueryParam() {
                // this.queryParam.month = this.getCurrentMonth()
            },
            initDictConfig() {
            },
            onChange(){

            },
            handleRelease(id) {
                let $this = this;
                this.$confirm({
                    title: "提示",
                    content: "您确认需要发布评论吗？",
                    onOk: function () {
                        $this.loading = true;
                        let url = "/comment/submit";
                        let param = {id:id}
                        postAction(url,param).then((res)=>{
                            if(res.success){
                                $this.$message.success("评论发布已成功执行，请在评论结果中查看发布情况");
                            }else{
                                $this.$message.warning(res.message);
                            }
                        }).finally(() => {
                            $this.loading = false;
                        })
                    }
                });
            },
            // exportValidator(){
            //     if(!this.queryParam.month){
            //         this.$message.warn("请先选择导出月份");
            //         return false;
            //     }else{
            //         return true;
            //     }
            // }

        }
    }
</script>
<!--<style scoped>-->
<!--    @import '~@assets/less/common.less';-->
<!--</style>-->
